<html>
<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
</head>
<body>
<div id="app1">
  {{title}}
  <button type="button" @click="changeTitle">change title</button>
  <button type="button" @click="destroy">destroy</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
  new Vue({
    el:"#app1",
    data:{
      title:"this is title"
    },
    methods:{
      changeTitle:function(){
        this.title= "new title";
      },
      destroy:function(){
        this.$destroy();
      }
    },
    beforeCreate(){
      console.log("beforeCreate")
    },
    created(){
      console.log("created")
    },
    beforeMount(){
      console.log("beforeMount")
    },
    mounted(){
      console.log("mounted")
    },
    beforeUpdate(){
      console.log("beforeUpdate")
    },
    updated(){
      console.log("updated")
    },
    beforeDestroy(){
      console.log("beforeDestory")
    },
    destroyed(){
      console.log("destory")
    }
  })
</script>
</html>